<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 350px;
            margin: 0 auto;
            background-color: lightpink;
            text-align: center;
        }

        textarea {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <textarea rows="10" cols="55"></textarea>
        <p>已经输入<strong>0</strong>个子</p>
    </div>
    <script src="./jquery.js"></script>
</body>

<ml>
<script>
    $('textarea').on('input propertychange',function(){
        var count = 0;//总长度
        var ziti = $(this).val();
        for (var i = 0; i < ziti.length; i++) {
            // console.log($(this).val());
            // console.log(ziti);
            if (ziti.charCodeAt(i) <= 255) {
                count = count + 0.5;
            } else {           
                count = count + 1;
            }
        }
        console.log('count='+count);
        var result = Math.ceil(count);
        console.log('result='+result);

        if (count >= 10) {
            $('p').html('您已输入' + Math.ceil(count) + '个字').css('color', 'red');
        } else {
            $('p').html('您已输入' + Math.ceil(count) + '个字').css('color', 'black');
        }
    });
</script>
